<style scoped lang="scss">
$primary-color: #FF6040;
$primary-light-color: #FF8A80;
$white-color: #fff;
$bg-color: #fafafa;
$text-color: #323233;

.addresslist {
  width: 10rem;
  background-color: #f5f5f5;
  padding-top: 1.0667rem;

  .fixed-top {
    width: 10rem;
    height: 1.0667rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;

    .list-top {
      width: 10rem;
      height: 1.0667rem;
      background-color: $primary-color;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: center;
    }

    .list-top span {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      border-top: 1px solid $white-color;
      border-right: 1px solid $white-color;
      transform: rotate(225deg);
      margin: 0 0.4rem;
      position: absolute;
      left: 0;
      top: 0.4533rem;
    }

    .list-top p {
      font-size: 0.4267rem;
      color: $white-color;
      position: absolute;
      left: 1.0667rem;
      top: 0.2533rem;
    }

    .list-top h2 {
      font-size: 0.48rem;
      color: $white-color;
      margin: 0 0.4rem;
      font-weight: 400;
    }
  }

  .list-content {
    width: 10rem;
    height: 100%;
    overflow: hidden;
    background-color: $bg-color;

    .list-item {
      width: 12rem;
      height: 1.6rem;
      background-color: $white-color;
      margin-bottom: 0.2667rem;
      display: flex;
      align-items: center;
      padding-bottom: 0.4rem;
      padding-top: 0.4rem;
      transition: all 0.5s;

      .list-item-left {
        width: .6rem;
        height: 1.6rem;
        display: flex;
        align-items: center;
        margin-left: 0.4rem;

        input {
          width: 0.5rem;
          height: 0.5rem;
        }
      }

      .list-item-center {
        width: 7.5rem;
        height: 1.6rem;
        margin-left: 0.4rem;

        h5 {
          font-size: .4267rem;
          color: $text-color;
          color: #323233;
          font-weight: 400;
        }

        p {
          font-size: .36rem;
          color: $text-color;
          margin-right: 0.5rem;
          font-weight: 400;
        }

        span {
          font-size: .32rem;
          color: $white-color;
          font-weight: 400;
          background-color: red;
          border-radius: .2rem;
          padding: 0.05rem 0.2rem;
        }
      }

      .list-item-right {
        width: 1.9rem;
        height: 1.6rem;

      }

      .list-item-button {
        width: 1rem;
        height: 1.6rem;

        button {
          width: 1rem;
          height: 1.6rem;
          background-color: $white-color;
          color: $primary-color;
          font-size: .4rem;
          border: 0;
        }
      }
    }
  }

  .addresslist-buttom {
    width: 10rem;
    height: 1.3333rem;
    background-color: $white-color;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;

    button {
      width: 9.2rem;
      height: 1.0667rem;
      background-color: #ee0a24;
      color: $white-color;
      font-size: 0.4267rem;
      border-radius: 1rem;
      border: 0;
    }
  }
}

.custom-radio {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.custom-radio input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
}

.custom-radio input:checked~.checkmark {
  background: #ff4444;
  border-color: #ff4444;
}

.checkmark:after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}

.custom-radio input:checked~.checkmark:after {
  opacity: 1;
}
</style>
<template>
  <div class="addresslist">
    <div class="fixed-top">
      <vueHeader title="地址列表" :path="type == 1 ? 'orderconfirm' : 'user'"></vueHeader>
    </div>
    <div class="list-content">
      <div class="list-item" v-for="(item, index) in addressList" :key="item.id" :ref="'itemList' + index"
        @click="selectAddress(item)" @touchstart="handleTouchStart('itemList' + index, $event)"
        @touchmove="handleTouchMove('itemList' + index, $event)" @touchend="handleTouchEnd('itemList' + index, $event)">
        <div class="list-item-left">
          <label class="custom-radio">
            <input type="radio" name="address" :value="item.id" :checked="item.id == defaultAddress.id"
              @change="handleChange(item.id)">
            <span class="checkmark"></span>
          </label>
        </div>
        <div class="list-item-center">
          <h5>
            {{ item.username }} {{ item.userphone }} <span v-if="item.id == defaultAddress.id">默认</span>
          </h5>
          <p>
            {{ item.location }}
          </p>
        </div>
        <div class="list-item-right">
          <i class="iconfont icon-edit" @click="toEditAddress(item)"></i>
        </div>
        <div class="list-item-button">
          <button @click="showConfirmationBox = true; deleteId = item.id;"
            @touchend="showConfirmationBox = true; deleteId = item.id">删除</button>
        </div>
      </div>
    </div>
    <div class="addresslist-buttom">
      <button @click="toAddAddress">
        新增地址
      </button>
    </div>
    <confirmationbox :isShow.sync="showConfirmationBox" :title="title" :message="message"
      @handleConfirmbox="handleDelete">
    </confirmationbox>
  </div>
</template>
<script>
import { getAddressList } from "@/api/ress/addresslist";
import vueHeader from '@/components/common/header/header.vue'
import confirmationbox from "@/components/common/confirmationbox.vue";
import { removeAddressPostAPI } from '@/api/ress/editress';
export default {
  components: {
    vueHeader,
    confirmationbox
  },
  data() {
    return {
      startX: 0,
      moveX: 0,
      type: this.$route.query.type,
      addressList: [],
      uid: '',
      id: this.$route.query.id,
      defaultAddress: {
        id: ''
      },
      showConfirmationBox: false,
      title: '温馨提示',
      message: '确定删除该地址吗？',
      deleteId: '',
    };
  },
  mounted() {
    this.fetchAddressList();
    console.log(this.type);

  },
  methods: {
    handleTouchStart(refName, event) {
      this.startX = event.touches[0].clientX;
    },
    handleTouchMove(refName, event) {
      this.moveX = event.touches[0].clientX;
      let offsetX = this.moveX - this.startX;
      if (offsetX > -100 && offsetX < 0) {
        this.$refs[refName][0].style.transform = `translateX(${this.moveX - this.startX}px)`;
      }
    },
    handleTouchEnd(refName, event) {
      const offsetX = this.moveX - this.startX;
      if (offsetX < -50) {
        this.$refs[refName][0].style.transform = 'translateX(-2rem)';
      } else {
        this.$refs[refName][0].style.transform = 'translateX(0)';
      }
    },
    async handleDelete() {
      console.log(1);
      try {
        let res = await removeAddressPostAPI({
          id: this.deleteId
        });
        if (res.code === 200) {
          this.$toast.show('删除成功', 'success', 'top')
          this.showConfirmationBox = false;
          this.fetchAddressList();
        }
      } catch (error) {
        this.$toast.show('删除失败', 'error', 'top')
      }
    },
    async fetchAddressList() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      this.uid = userInfo.uid;
      let res = await getAddressList({
        uid: this.uid
      });
      console.log(res);
      if (res.code === 200) {
        this.addressList = res.list;
      }
      const addressid = localStorage.getItem('addressid')
      console.log(addressid);
      if (addressid) {
        this.defaultAddress.id = addressid
      } else {
        this.defaultAddress.id = this.addressList[0].id
        console.log(this.addressList);

      }
      console.log(this.defaultAddress);
    },
    selectAddress(item) {
      // this.$router.push({ name: 'user' })
    },
    toAddAddress() {
      this.$router.push({ name: 'addressadd' })
    },
    handleChange(id) {
      this.defaultAddress.id = id
      localStorage.setItem('addressid', id)
      this.$router.push({ name: 'orderconfirm' })
    },
    toEditAddress(item) {
      this.$router.push({ name: 'editress', query: { id: item.id } })
    },
  },
}
</script>
